<template>
  <div class="infoPanelDetail" v-if="info&&info.length">
    <div class="infoPanelBox" :class="cellNum?`infoPanelBox-cell${cellNum}`:''" v-for="(item,index) in info"
         :key="index">
      <div class="infoPanelName" :class="item.color?`infoPanelBox-${item.color}`:''"
           :style="{flex:fontWidth,textAlign:align}">{{item.name}}
      </div>
      <div class="infoPanelCont">
        <zy-button :type="item.btnType" @click="btnClick(item.type)" v-if="item.type">{{item.val}}</zy-button>
        <div class="infoPanelVal" v-else>{{String(item.val) !== '0' && !item.val? '-': item.val}}
        </div>
        <div class="infoPanelTip" v-if="item.tip">{{item.tip}}</div>
      </div>
    </div>
  </div>
</template>

<script>

	export default {
		name: "zyInfoPanelDetail",
		props: {
			info: {
				type: Array,
				default: () => []
			},
			cellNum: {
				type: String,
				default: () => '4'
			},
			align: {
				type: String,
				default: () => 'right'
			}
		},
		data() {
			return {
				fontWidth: ''
			};
		},
		computed: {},
		watch: {
			info: {
				handler(newVal) {
					let arr = [];
					newVal.forEach(item => {
						arr.push(item.name.length)
					})
					let fontWidth = parseFloat((Math.max(...arr) + 2) * 14) + 'px';
					this.fontWidth = `0 0 ${fontWidth}`
				},
				deep: true
			}
		},
		components: {},
		methods: {
			btnClick(type) {
				this.$emit('btnClick', type)
			}
		},
		mounted() {
			let arr = [];
			this.info.forEach(item => {
				arr.push(item.name.length)
			})
			let fontWidth = parseFloat((Math.max(...arr) + 2) * 14) + 'px';
			this.fontWidth = `0 0 ${fontWidth}`
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base.less";

  .infoPanelDetail {
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px;
    width: 100%;

    .infoPanelBox {
      display: flex;
      font-size: 14px;
      margin-bottom: 12px;

      .infoPanelName {
        color: @fontColor;
        line-height: 25px;
      }

      .infoPanelBox-danger {
        color: @allDangerColor;
      }

      .infoPanelBox-warring {
        color: @allWarringColor;
      }

      .infoPanelBox-primary {
        color: @allPrimaryColor;
      }

      .infoPanelBox-success {
        color: @allSuccessColor;
      }

      .infoPanelCont {
        flex: 1;
        padding-right: 20px;
        display: flex;
        flex-direction: column;

        .infoPanelVal {
          flex: 1;
          line-height: 25px;
          word-break: break-all;
        }

        .infoPanelTip {
          font-size: 12px;
          color: @allWarringColor;
          line-height: 25px;
        }
      }
    }

    .infoPanelBox-cell2 {
      width: 50%;
    }

    .infoPanelBox-cell3 {
      width: 33.3334%;
    }

    .infoPanelBox-cell4 {
      width: 25%;
    }
  }
</style>
